{% extends "layout.html" %}

{% block page_title %}{{ ("Photos Management") }}{% endblock %}

{% block extra_head %}
<link href="/static/datepicker/css/datepicker.css" rel="stylesheet">
{% endblock %}

{% block admin_content %}
<div id="links_container" class="span12">

<div class="alert alert-info" style="display:none">
    <a class="close" data-dismiss="alert">&times;</a>
    <strong>{{ _("Information") }}!</strong> 
    <p id="alert-info-message"></p>
</div>

<form id="setting" class="form-horizontal">
    <fieldset>
        <legend>{{ _("Timeline Settings") }}:</legend>
        <div class="control-group">
            <label class="control-label" for="host">{{ _("Host") }}</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id='host' name="host" value="{{ setting.host }}" placeholder="Required">
                <p class="help-block">{{ _("URL for this website, without HTTP(s)://") }}</p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="headline">{{ _("Headline") }}</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id='headline' name="headline" value="{{ setting.headline }}" placeholder="Required">
                <p class="help-block">{{ _("Headline for timeline") }}</p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="text">{{ _("Text") }}</label>
            <div class="controls">
                <textarea class="input-xlarge" id="text" rows="3" name="text" placeholder="Optional">{{ setting.text }}</textarea>
            </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="start_date">{{ _("Start Date") }}</label>
          <div class="date controls" id="start_date" data-date="" data-date-format="yyyy-mm-dd">
            <input class="span2" size="16" type="text" id="start_date" name="start_date" value="{{ setting.start_date }}" readonly>
            <span class="add-on"><i class="icon-calendar"></i></span>
          </div>
        </div>
        <div class="form-actions">
            <input type="hidden" class="" name="setting_id" id="setting_id" value="{{ setting.key().id() }}">
            <button type="submit" class="btn btn-primary" id="bt_submit">{{ _("Update") }}</button>
        </div>
    </fieldset>
</form>
</div><!-- posts_container -->

{% endblock %}

    {% block extra_js_block %}
    <script type="text/javascript" src="/static/datepicker/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript">
    // init datapicker
    $('#start_date').datepicker();

    // set click function for submit button in form
    $("button#bt_submit").click(function updateSetting(event) {
        $.ajax({
            url: '/admin/settings',
            type: 'post',
            dataType: 'json',
            data: $('form#setting').serialize(),
            success: function(data, state) {
                // show alert message
                $("#alert-info-message").html(data.message);
                $(".alert-info").toggle(true);
            },
            error: function(e) {
                alert(e);
            },
            beforeSend: function() {
                if($("form #headline").val() == "") {
                    alert("Headline can't be empty");
                    return false;
                }
                if($("form input#start_date").val() == "") {
                    alert("Start Date can't be empty");
                    return false;
                }
            }
        });
        // remove default function of submit button
        event.preventDefault();
    });

    </script>
    {% endblock %}